<template>
  <div style="height:100%;width:100%;box-sizing: border-box;position: relative;" @mousemove="handleMousemove($event)">
    <svg :width="props.option.w" :height="props.option.h">
      <polygon :points='getSVGPoints()' style="stroke: #000;fill: #fff;"></polygon>
    </svg>
    <div style="position: absolute;left:50%;top:50%;width:50%;text-align: center;"
         :style='{"transform":"translate(-50%,-50%) scale("+zoom+")",width:props.option.w*0.8+"px"}'>
      {{ props.option.option.label }}
    </div>
    <div v-if="props.option.selected" style="position: absolute;left:100%;top:0;width:50px ;">
      <span @click="handleStartLink($event)">操作按钮</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ComponentOption} from "../../../ComponentOption.ts";
import {inject} from "vue";
import EventBus from "../../../EventBus.ts";
import {useHandleLinkEdit} from "../handleLinkEdit.ts";
//:style='{width:diamondWidth()+"px"}'
const panelEvents: any = inject("panelEvents")
const eventBus: EventBus = inject("eventBus")
const panelStatus: any = inject("panelStatus")
const panelApi: any = inject("panelApi")
const props = defineProps<{
  option: ComponentOption,
  zoom: number,//放大系数
}>();

const {handleMousemove,handleStartLink} = useHandleLinkEdit(panelStatus, panelApi, props.option, panelEvents, eventBus)
function getSVGPoints() {
  let point1 = props.option.w / 2 * props.zoom + ",0";
  let point2 = props.option.w * props.zoom + "," + props.option.h / 2 * props.zoom
  let point3 = props.option.w / 2 * props.zoom + "," + props.option.h * props.zoom
  let point4 = "0," + props.option.h / 2 * props.zoom
  return point1+","+point2+","+point3+","+point4
}

function figureLength() {
  let x = props.option.w * props.zoom / 2;
  let y = props.option.h * props.zoom / 2
  return Math.sqrt(x * x + y * y)
}

function figureDeg() {
  let diamondWidth = figureLength()
  let a = Math.asin(props.option.h * props.zoom / 2 / diamondWidth)
  return a / Math.PI * 180;
}

function figureAnchor2() {
  let diamondWidth = figureLength()
  let a = Math.asin(props.option.w / 2 / diamondWidth)

  return a;
}

function figureHeight() {
  let diamondWidth = figureLength()
  return diamondWidth * Math.sin(2 * figureAnchor1())
}

//rotateZ(45deg) skew(-20deg, -20deg)

</script>
<style lang="scss" scoped>
.border-line {
  height: 2px;
  background-color: #999;
  transform-origin: 0% 0%;
  position: absolute;
}
</style>
